<template>
    <div id="content">
        <div class="article_wrap">
            <div class="article_title article_detail_title">{{ article.title }}</div>
            <div class="article_info">
              <span class="article_info_username">{{ article.author }}</span>
              <span class="article_info_date">发表于：{{ article.created_date }}</span>
              <span class="article_info_label">标签：
                <span v-if="article.labels.length === 0">未分类</span>
                <el-tag v-else class="tag_margin" type="primary" v-for="(tag, index) in article.labels" :key="index">{{ tag }}</el-tag>
              </span>
            </div>
            <mavon-editor
              :value="article.content"
              class="markdown-body"
              :subfield="prop.subfield"
              :defaultOpen="prop.defaultOpen"
              :toolbarsFlag="prop.toolbarsFlag"
              :editable="prop.editable"
              :scrollStyle="prop.scrollStyle"
              :codeStyle="prop.codeStyle"
              :ishljs="prop.ishljs" />
            <div class="comment">
                <el-input type="textarea" :rows="5" placeholder="请输入精彩评论" v-model="comment"></el-input>
                <el-button @click="addArticleComment()" class="commit_btn" type="success">发表</el-button>
            </div>

            <div class="all_comment">
              <span class="comment_title">精选评论</span>
                <el-row>
                    <el-col class="column" :span="24" v-for="item in user_comment" :key="item">
                    <el-card :body-style="{ padding: '0px' }">
                      <div style="padding: 14px;">
                        <div class="bottom_clearfix">
                          <span class="author">{{item.author}}</span>
                          <time class="created_date">{{ item.created_date }}</time>
                        </div>
                        <div class="user_comment">
                          <span>{{item.comment}}</span>
                        </div>
                      </div>
                    </el-card>
                    </el-col>
                </el-row>
            </div>

            </div>
        </div>
</template>

<script>
    import '../assets/atom-one-light.css';
    export default {
        name: 'articleDetail',
        data() {
            return {
                article: {},
                comment: '',
                user_comment: [],
                userInfo: {},
                currentDate: new Date()
            }
        },
        mounted: function() {
            let id = this.$route.params.id;
            let _this = this;

            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/articleDetail/' + id,
                data: {}
            }).then(function(res) {
                _this.article = res.data.payload.article;
                if (_this.article.labels) {
                    _this.article.labels = _this.article.labels.split(',');
                }
                _this.$message.success('获取文章详情成功!');
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });

            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/articleComments/' + id,
                data: {}
            }).then(function(res) {
                if (res.data.status == 200) {
                    _this.user_comment = res.data.payload.article;
                }
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });
        },
        computed: {
            prop() {
                let data = {
                    subfield: false, // 单双栏模式
                    defaultOpen: 'preview', //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
                    editable: false,
                    toolbarsFlag: false,
                    scrollStyle: true,
                    code_style: 'tomorrow-night',
                    ishljs: true,
                }
                return data;
            }
        },
        methods: {
            addArticleComment: function() {
                this.userInfo = JSON.parse(localStorage.getItem('user'));
                if (!this.userInfo) {
                    this.$message.success('用户未登录，请先登录!');
                    this.$router.push('/admin/signin');
                } else {
                    let id = this.$route.params.id;
                    let _this = this;

                    this.$req({
                        method: "post",
                        url: 'http://49.235.28.88:3000/article/v1/addArticleComment',
                        data: {
                            account: this.userInfo.account,
                            app_sid: this.userInfo.app_sid,
                            article_id: id,
                            comment: this.comment,
                            username: this.userInfo.username
                        }
                    }).then(function(res) {
                        if (res.data.status == 400) {
                            _this.$message.error(res.data.err);
                        } else if (res.data.status == 420 || res.data.status == 410) {
                            _this.$message.error(res.data.err.msg);
                        } else {
                            _this.$message.success('评论成功!');
                            location.reload();

                        }
                    }).catch(function(e) {
                        _this.$message.error('服务器可能出现异常!');
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .comment_title {
      float: left;
      color: white;
    }
    .all_comment {
        margin: 15px 0;
        border-radius: 15px;
    }
    .column {
      margin: 10px 0;
    }

    .user_comment {
      float: left;
      margin-bottom: 15px;
    }

    .author,
    .created_date {
        font-size: 15px;
        color: #999;
        margin-right: 10px;
    }

    .bottom_clearfix {
        margin-bottom: 15px;
    }

    .article_title {
        display: inline-block;
        color: white;
        font-size: 22px;
        font-weight: 600;
        cursor: pointer;
    }

    .article_title:hover {
        border-bottom: 1px solid #222;
        color: black;
        background: white;
    }

    .article_info {
        color: white;
        font-size: 14px;
        padding-top: 8px;
        margin-top: 10px;
    }

    .article_info_username {
        margin-right: 10px;
    }

    .article_info_date {
        margin-right: 10px;
    }

    .tag_margin {
        margin: 3px;
    }

    .article_gist {
        text-align: center;
        margin-top: 10px;
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 16px;
        color: white;
    }

    .article_detail_title {
        cursor: default;
        margin: 40px 0 0;
        color: white;
    }

    .article_detail_content {
        text-align: left;
        padding: 60px 0;
        margin-left: 3%;
        font-size: 18px;
        color: white;
    }

    .article_info {
        color: white;
    }

    .edit_head {
        margin: 20px 0;
        text-align: left;
    }


    .markdown-body {
        border: 1px solid #bfcbd9;
        border-radius: 15px;
        margin: 30px 20px;
    }

    .markdown textarea {
        border: none;
        resize: none;
        /*不可拖动*/
    }

    .comment {
        margin: 40px 0;
        /* border: 1px solid #bfcbd9; */
        color: black;
        border-radius: 15px;
        width: 100%;
        margin-top: 30px;
        overflow: hidden;
    }

    .commit_btn {
        margin-top: 2%;
        float: right;
        width: 130px;
    }
</style>
